<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24" class="bg">
          <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            <el-row>
              <el-form :inline="true" ref="queryForm" size="small" :model="queryParam" class="demo-form-inline">
                 <el-form-item label="字典类型名称">
                  <el-input v-model="queryParam.dictName" placeholder="字典类型名称"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                   <el-select v-model="queryParam.status" placeholder="请选择"  clearable>
                      <el-option
                        v-for="item in dicts.sys_normal_disable"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                      </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="创建时间"  >
                     <el-date-picker
                          v-model="createTimeValue"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>

                 <el-form-item>
                   <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
                 </el-form-item>
             </el-form>
            </el-row>
            <el-row>
<!--              <el-button type="primary" size="small" icon="el-icon-plus"  @click="showDialog(1)">新增</el-button>-->
<!--              <el-button type="danger" size="small" icon="el-icon-delete"  @click="itemBatch_DEL" v-if="this.itemBatchData.length ===0" plain disabled>删除</el-button>-->
<!--              <el-button type="danger" size="small" icon="el-icon-delete"  @click="itemBatch_DEL" v-else >删除</el-button>-->
<!--              <el-button type="warning" size="small" icon="el-icon-bottom" plain disabled>导入</el-button>-->
<!--              <el-button type="success"  size="small" icon="el-icon-top" plain disabled >导出</el-button>-->
              <!-- <el-button type="warning" size="small" icon="el-icon-bottom" v-if="this.itemBatchData.length ===0" plain disabled>导入</el-button>-->
              <!-- <el-button type="warning" size="small" icon="el-icon-bottom" v-else>导入</el-button>-->
              <!-- <el-button type="success"  size="small" icon="el-icon-top" v-if="this.itemBatchData.length ===0" plain disabled >导出</el-button>-->
              <!-- <el-button type="success"  size="small" icon="el-icon-top" v-else >导出</el-button>-->
            </el-row>
          </el-form>

    <!--功能区-->
        <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd()"
                >新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate()"
                >修改</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete()"
                >删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport()"
                >导出</el-button>
              </el-col>

              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-refresh"
                  size="mini"
                  @click="handleRefreshCache()"
                >刷新缓存</el-button>
              </el-col>
        </el-row>


        <el-table :data="tableData.rows" style="width: 100%"  ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column fixed prop="id" label="类型ID" width="80"> </el-table-column>
      <el-table-column prop="dictName" label="名称" width="120"> </el-table-column>
      <el-table-column prop="dictType" label="字典类型" >
          <template slot-scope="scope">
            <el-link type="primary" @click="jumpUrl(scope.row)">{{scope.row.dictType}}</el-link>
          </template>

      </el-table-column>
      <el-table-column prop="status" label="状态"  width="80" align="center"> </el-table-column>
      <el-table-column prop="createBy" label="创建者"  width="80" align="center"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"  width="80" align="center"> </el-table-column>

      <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="scope">
           <i v-if="scope.row.createTime!= null" class="el-icon-time"></i>
            <span v-if="scope.row.createTime!= null" style="margin-left: 10px">
              {{scope.row.createTime}}
            </span>
          </template>
      </el-table-column>

      <el-table-column prop="remark" label="备注" > </el-table-column>


        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
              <el-button size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-col>
     <!-- 新增和修改对话框-->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">
        <el-form ref="form" :model="form"   label-width="100px">
          <el-form-item   label="字典名称" prop="dictName"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <el-input v-model="form.dictName" placeholder="请输入字典名称"/>
          </el-form-item>

          <el-form-item label="类型" prop="dictType" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <!-- disabled 禁用输入 -->
<!--            {{form.dictType}}-->
            <el-input  type="text"  v-model="form.dictType" placeholder="请输入类型名称" />
          </el-form-item>


          <el-form-item label="备注信息">
               <el-input  type="text" v-model="form.remark" placeholder="请输入备注信息" />
          </el-form-item>

          <el-form-item label="状态" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dicts.sys_normal_disable"
                :key="dict.id"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelForm">取 消</el-button>
        </div>
     </el-dialog>
    </el-row>

    <!-- 分页条 -->
    <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
      :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="pageNum"-->
<!--      :page-sizes="[5, 10, 20, 30]"-->
<!--      :page-size="pageSize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total">-->
<!--    </el-pagination>-->

  </div>
</template>

<script>
// 混流js数据源存放在其中
// import mixin from './mixin'
// import DictMixin from '@/mixins/DictMixin.js'
import PageMixin from '@/mixins/PageMixin.js'
import AddOrEditMixin from '@/mixins/AddOrEditMixin.js'
import DictMixin from '@/mixins/DictMixin.js'

import { dataAPI,editApi,findByIdApi,addApi,freshCache} from '@/api/dicttype.js'
export default {
  name: 'dicttype',
  mixins: [DictMixin, PageMixin,AddOrEditMixin],
  dicts: ['sys_normal_disable'],
  data() {
    return {
      primaryKey: 'id',
      fetchDataApi: dataAPI,
      findByIdApi: findByIdApi,
      addApi:addApi,
      editApi:editApi,
    }
  },
  methods: {
    // 重置表单
    initFormValue(){
      this.form = {
        status: '0'
      }
    },
    // 跳转到明细页面
    jumpUrl(row) {
      console.log("访问了,",row)
      this.$router.push('/dict/data/'+ row.id)
    },
       // 刷新缓存
    handleRefreshCache(){
      this.$confirm('确定要刷新redis的缓存数据吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
          }).then(() => {
            this.executeRefreshCache()

          }).catch(() => {

          });
    },
    executeRefreshCache(){
          const loading = this.$loading({
             lock: true,
             text: '正在执行操作，请稍待...',
             spinner: 'el-icon-loading',
             background: 'rgba(0, 0, 0, 0.7)'
           });

          freshCache().then(resp=> {
            //关闭动画
            loading.close();
            this.$message({  type: 'success',  message: '操作成功'})
          }).cache(e=> {
            //关闭动画
            loading.close();
          })
       },
        handleExport(){
         this.download('/sysdicttype/download',this.queryParam, `${new Date().getTime()}_dicttype.xlsx`)
       },

     created(){
       this.initFormValue()
     }
     }
}

</script>

<style>

</style>
